<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="../js/jquery.js"></script>
<link href="../bootstrap/css/bootstrap.css" rel="stylesheet">
<script src="../bootstrap/js/bootstrap.min.js"></script>
<!--[if lte IE 9]>
<script src="../bootstrap/js/respond.min.js"></script>
<script src="../bootstrap/js/html5shiv.min.js"></script>
<![endif]-->
<script type="text/javascript"
	src="../js/lhgdialog.js?self=true&skin=iblack"></script>
<script src="../js/jquery.autocomplete.min.js"></script>
<style type="text/css">
body {
	width: 96%;
	margin-left: 2%;
	margin-right: 2%;
}

.sp {
	margin-top: 3px;
}

.addon-text {
	min-width: 125px;
}

thead {
	background-color: #ccc;
	text-align: center;
}

.badge-ok {
	background-color: rgb(50, 184, 50);
	margin-right: 5px;
	min-width: 8px;
	height: 8px;
	border-radius: 4px;
	padding: 0
}

.badge-no {
	background-color: #ccc;
	margin-right: 5px;
	min-width: 8px;
	height: 8px;
	border-radius: 4px;
	padding: 0
}

.table-n-p>thead>tr>th,.table>tbody>tr>th,.table-n-p>tfoot>tr>th,.table-n-p>thead>tr>td,.table-n-p>tbody>tr>td,.table-n-p>tfoot>tr>td
	{
	padding: 3px 20px;
}

.autocomplete-suggestions {
	border: 1px solid #999;
	background: #FFF;
	overflow: auto;
	min-width: 175px;
}

.autocomplete-suggestion {
	padding: 2px 5px;
	white-space: nowrap;
	overflow: hidden;
}

.autocomplete-selected {
	background: #F0F0F0;
}

.autocomplete-suggestions strong {
	font-weight: normal;
	color: #3399FF;
}
</style>
</head>
<body>
	<div class="sp"></div>
	<div class="row">
		<div class="col-sm-4">
			<div class="input-group">
				<span class="input-group-addon addon-text">车架号</span> <input
					id="vin" type="text" class="form-control" placeholder="请输入车架号">
			</div>
		</div>
		<div class="col-sm-4">
			<div class="input-group">
				<span class="input-group-addon addon-text">发动机号</span> <input
					id="engine" type="text" class="form-control" placeholder="请输入发动机号">
			</div>
		</div>
		<div class="col-sm-4">
			<div class="input-group">
				<span class="input-group-addon addon-text">保单号</span> <input
					id="plyno" type="text" class="form-control" placeholder="请输入保单号">
			</div>
		</div>
	</div>
	<div class="sp"></div>
	<div class="row">
		<div class="col-sm-4">
			<div class="input-group">
				<span class="input-group-addon addon-text">投保电话</span> <input
					id="mobile" type="text" class="form-control" placeholder="请输入投保电话">
			</div>
		</div>
		<div class="col-sm-4">
			<div class="input-group">
				<span class="input-group-addon addon-text">车主姓名</span> <input
					id="name" type="text" class="form-control" placeholder="请输入车主姓名">
			</div>
		</div>
		<div class="col-sm-4">
			<div class="input-group">
				<span class="input-group-addon addon-text">车主证件</span> <input
					id="cert" type="text" class="form-control" placeholder="请输入车主证件号">
			</div>
		</div>
	</div>
	<div class="sp"></div>
	<table class="table table-striped table-bordered table-condensed">
		<thead>
			<tr>
				<td>选择</td>
				<td>车牌号</td>
				<td>发动机号</td>
				<td>品牌型号</td>
				<td>车架号</td>
				<td>车主姓名</td>
				<td>承保机构</td>
			</tr>
		</thead>
		<tbody id="carInfos">
			<tr>
				<td colspan="7">暂时没有满足条件的车辆</td>
			</tr>
		</tbody>
	</table>
	<div class="pull-right">
		<button class="btn btn-sm btn-primary"
			style="width: 125px;margin-right: 10px" onclick="confirmCarInfo();">确认</button>
		<button class="btn btn-sm btn-primary"
			style="width: 125px;margin-right: 10px" onclick="force();">无匹配车辆</button>
	</div>

	<script type="text/javascript">
		function getRootPath() {
			var strFullPath = window.document.location.href;
			var strPath = window.document.location.pathname;
			var pos = strFullPath.indexOf(strPath);
			var prePath = strFullPath.substring(0, pos);
			var postPath = strPath.substring(0,
					strPath.substr(1).indexOf('/') + 1);
			return (prePath + postPath);
		}
		function showMessage(info, delay) {
			if (!!delay) {
				delay = 5;
			}
			$.dialog({
				id : 'msg',
				title : false,
				content : info,
				width : 200,
				height : 100,
				left : '50%',
				top : '50%',
				fixed : true,
				drag : false,
				resize : false,
				time : delay,
				lock : true,
				max : false,
				min : false
			});
		}
		function carInfoCallback(result) {
			if (result.operationState == 'SUCCESS') {
				fillCarInfoIntoTable(result.data.cars.data);
			} else {
				showMessage(result.data.reason, 5);
			}
		}
		function fillCarInfoIntoTable(data) {
			var carInfoPanel = $("#carInfos");
			carInfoPanel.empty();
			if (!data || data.length == 0) {
				carInfoPanel
						.append("<tr><td colspan='7'>暂时没有满足条件的车辆</td></tr>");
			}
			$(data)
					.each(
							function(i, item) {
								carInfoPanel
										.append("<tr><td><input type='radio'name='c' value='"
												+ (item.C_CUS_NO ? item.C_CUS_NO
														: "")
												+ "' class='form-control' style='width: auto;height: auto;' info='"
												+ item.C_PLY_JQ
												+ ","
												+ item.C_PLY_SY
												+ "'></td><td>"
												+ (item.C_CAR_PLATE ? item.C_CAR_PLATE
														: "")
												+ "</td><td>"
												+ (item.C_CAR_ENGINE ? item.C_CAR_ENGINE
														: "")
												+ "</td><td>"
												+ (item.C_CAR_MODEL ? item.C_CAR_MODEL
														: "")
												+ "</td><td>"
												+ (item.C_CAR_VIN ? item.C_CAR_VIN
														: "")
												+ "</td><td>"
												+ (item.C_CUS_NME ? item.C_CUS_NME
														: "") + "</td><td>"
														+ (item.C_CUS_AREA ? item.C_CUS_AREA 
																: "") + "</td></tr>");
							});
		}
		function listCarsByVin(vin) {
			$.dialog.tips("正在查询相关车辆");
			$.post(getRootPath() + "/listCarInfoByVin.ac", {
				vin : vin
			}, carInfoCallback, "json");
		}
		function listCarsByEngine(engine) {
			$.dialog.tips("正在查询相关车辆");
			$.post(getRootPath() + "/listCarInfoByEngine.ac", {
				engine : engine
			}, carInfoCallback, "json");
		}
		function listCarsByModel(model) {
			$.dialog.tips("正在查询相关车辆");
			$.post(getRootPath() + "/listCarInfoByModel.ac", {
				model : model
			}, carInfoCallback, "json");
		}
		function listCarsByName(name) {
			$.dialog.tips("正在查询相关车辆");
			$.post(getRootPath() + "/listCarInfoByName.ac", {
				name : name
			}, carInfoCallback, "json");
		}
		function listCarsByCert(certno) {
			$.dialog.tips("正在查询相关车辆");
			$.post(getRootPath() + "/listCarInfoByCert.ac", {
				certno : certno
			}, carInfoCallback, "json");
		}
		function listCarsByMobile(mobile) {
			$.dialog.tips("正在查询相关车辆");
			$.post(getRootPath() + "/listCarInfoByMobile.ac", {
				mobile : mobile
			}, carInfoCallback, "json");
		}
		function listCarsByPlyNo(plyNo) {
			$.dialog.tips("正在查询相关车辆");
			$.post(getRootPath() + "/listCarInfoByPlyNo.ac", {
				plyNo : plyNo
			}, carInfoCallback, "json");
		}
		function force() {
			var api = frameElement.api, W = api.opener;
			W.triggerForce(false);
			api.close();
		}

		function confirmCarInfo() {
			var selectedRadio = $(":radio:checked");
			var cusNo = selectedRadio.val();
			var plyinfos = selectedRadio.attr('info');
			var jq = plyinfos.split(',')[0];
			var sy = plyinfos.split(',')[1];
			if (!cusNo) {
				showMessage("请选择车辆", 5);
				return;
			}
			var api = frameElement.api, W = api.opener;
			var infoList = $(selectedRadio.parent()).siblings();
			var plate = $(infoList[0]).html();
			var engine = $(infoList[1]).html();
			var model = $(infoList[2]).html();
			var vin = $(infoList[3]).html();
			if (plate.trim() == "") {
				//输入车牌
				$.dialog.prompt('请输入车牌号码', function(v) {
					if (v.length < 5 || !/^[\u4e00-\u9fa50-9A-Z]{6,11}$/.test(v)) {
						showMessage("车牌号不正确", 3);
					} else {
						plate = v;
						W.aa(jq, sy, plate, engine, model, vin);
						api.close();
					}
				}, '', document).title("确认车牌号");
				return;
			}
			W.aa(jq, sy, plate, engine, model, vin);
			api.close();
		}
		$(function() {
			//VIN码自动完成
			$("#vin").autocomplete({
				serviceUrl : getRootPath() + '/queryVin.ac',
				onSelect : function(suggestion) {
					listCarsByVin(suggestion.value);
				},
				onSearchStart : function(query) {
					query = $('#vin').val().replace("\'", "");
				},
				paramName : 'key'
			});
			//发动机号
			$("#engine").autocomplete({
				serviceUrl : getRootPath() + '/queryEngine.ac',
				onSelect : function(suggestion) {
					listCarsByEngine(suggestion.value);
				},
				onSearchStart : function(query) {
					query = $('#engine').val().replace("\'", "");
				},
				paramName : 'key'
			});
			//品牌型号
			$("#model").autocomplete({
				serviceUrl : getRootPath() + '/queryModel.ac',
				onSelect : function(suggestion) {
					listCarsByModel(suggestion.value);
				},
				onSearchStart : function(query) {
					query = $('#model').val().replace("\'", "");
				},
				paramName : 'key'
			});
			//姓名
			$("#name").autocomplete({
				serviceUrl : getRootPath() + '/queryName.ac',
				onSelect : function(suggestion) {
					listCarsByName(suggestion.value);
				},
				onSearchStart : function(query) {
					query = $('#name').val().replace("\'", "");
				},
				paramName : 'key'
			});
			//证件
			$("#cert").autocomplete({
				serviceUrl : getRootPath() + '/queryCert.ac',
				onSelect : function(suggestion) {
					listCarsByCert(suggestion.value);
				},
				onSearchStart : function(query) {
					query = $('#cert').val().replace("\'", "");
				},
				paramName : 'key'
			});
			$("#mobile").autocomplete({
				serviceUrl : getRootPath() + '/queryMobile.ac',
				onSelect : function(suggestion) {
					listCarsByMobile(suggestion.value);
				},
				onSearchStart : function(query) {
					query = $('#mobile').val().replace("\'", "");
				},
				paramName : 'key'
			});
			$("#plyno").autocomplete({
				serviceUrl : getRootPath() + '/queryPlyNo.ac',
				onSelect : function(suggestion) {
					listCarsByPlyNo(suggestion.value);
				},
				onSearchStart : function(query) {
					query = $('#plyno').val().replace("\'", "");
				},
				paramName : 'key'
			});
			$("input").each(function(i, item) {
				$(item).on('focus', function() {
					var itemId = $(item).attr('id');
					$("input").each(function(i, item_) {
						if (itemId == $(item_).attr('id')) {
						} else {
							$(item_).val("");
						}
					});
				});
			});
		});
	</script>
</body>
</html>